<!doctype html>
<html lang="en">

<head>
    <title>预约信息</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="lib/head.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-dark" style="background-color: rgb(136, 136, 240)">
        <a class="navbar-brand" href="#">东方之光医院<span>🏥</span></a>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active ml-4">
                    <a class="nav-link" href="welcome.html">首页 <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item dropdown ml-4">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">医院概况</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownId">
                        <a class="dropdown-item" href="instroduction.html">医院介绍</a>
                        <a class="dropdown-item" href="history.html">医院历史</a>
                    </div>
                </li>
                <li class="nav-item dropdown ml-4">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">医疗服务</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownId">
                        <a class="dropdown-item" href="index.html">门诊排班</a>
                        <a class="dropdown-item" href="index.html">预约挂号</a>
                        <a class="dropdown-item" href="PatientServices.html">住院须知</a>
                        <a class="dropdown-item" href="insurance.html">医保专区</a>
                    </div>
                </li>

                <li class="nav-item ml-4">
                    <a class="nav-link" href="index.html">科室导航</a>
                </li>
                <li class="nav-item ml-4">
                    <a class="nav-link" href="https://www.csuft.edu.cn/">学术交流</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" value="搜索科室、医师">
                <button class="btn btn-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
        </div>
    </nav>

    <!-- 头部图片head -->
    <div class="ban_pic" style="background-image:url('https://www.xiangya.com.cn/images/ban_cd2.jpg')">
        <div class="ban_nr">
            <h1>医疗服务</h1>
            <p>为患者用户提供专业一流的就医服务</p>
        </div>
    </div>
    <!-- 组件2：展板 b4-jum -->
    <div class="jumbotron jumbotron-fluid py-3">
        <!-- <div class="container-fluid">
            <h1 class="display-3">线上挂号系统</h1>
            <p class="lead">东方之光医院</p>
            <hr class="my-8">
        </div> -->
        <nav class="breadcrumb">
            <a class="breadcrumb-item" href="index.html">科室导航</a>
            <a class="breadcrumb-item" href="patient.html">就诊人管理</a>
            <a class="breadcrumb-item" href="appointment.html">预约信息</a>
        </nav>
    </div>
    <div class="container" id="app">
        <div class="row">
            <table class="table offset-3 col-md-4">
                <tbody v-if="schedul!=null">
                    <tr>
                        <td>医生</td>
                        <td>{{schedul.doctor.name}}</td>
                    </tr>
                    <tr>
                        <td>时间</td>
                        <td>{{schedul.time}}</td>
                    </tr>
                    <tr>
                        <td>叫号顺序</td>
                        <td>{{schedul.count+1}}</td>
                    </tr>
                    <tr>
                        <td>就诊人</td>
                        <td>
                            <div v-if="patient!=null">{{patient.name}} {{patient.idCard}}</div>
                            <div class="form-group mt-5">
                                <select class="form-control" v-model="patient">
                                    <option :value="patient" v-for="(patient, index) in patientArr" :key="index">
                                        {{patient.name}} {{patient.idCard}}</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a @click="addAppoint()" class="btn btn-danger btn-block">确定预约</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 页脚&网址地图 -->
    <!-- <div class="ban_pic" style="background-image:url('https://www.xiangya.com.cn/images/foot_bj.jpg')"> -->
    <div class="ban_pic" style="background-color:rgb(136, 136, 240);">
        <div class="ban_nr">
            <p class="lead text-center">Copyright© 2022 每天赚五块 版权所有 Powered by daydaygetfive.com</p>
            <p>
                <img src="/yxy-ruan4/html/lib/2wm.png">
            </p>
            <p class="lead text-center">组员：潘晴晴 | 文舒琪 | 易新宇 | 刘家 | 蒋佳骏 | 罗忻欣 | 谭新纪</p>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                schedul: null,
                patientArr: [],
                patient: null
            }
        },
        mounted() {
            this.schedul = JSON.parse(sessionStorage.getItem("schedul"));
            this.selectAllpatient();
        },
        methods: {
            selectAllpatient() {
                axios.get(`http://121.196.41.117:8080/api/patient`)
                    .then((response) => {
                        this.patientArr = response.data;
                    })
                    .catch(function (error) {
                    })
            },
            addAppoint() {
                let appoint = {
                    doctor: this.schedul.doctor,
                    patient: this.patient,
                    clinic: this.schedul.clinic,
                    time: this.schedul.time,
                    num: this.schedul.count + 1
                }
                axios.post(`http://121.196.41.117:8080/api/appoint/${this.schedul.id}`, appoint)
                    .then(function (response) {
                        if (response.data) {
                            alert("预约成功！请前往预约信息页面查看具体信息");
                            location.href = "appointment.html"
                        } else {
                            alert("预约失败！请重新操作")
                            location.href = "index.html";
                        }
                    })
                    .catch(function (error) {
                    })
            }
        },
    })
</script>